<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<view class="center">
			<!-- 上面地区的下拉选择框 -->
			<view class="areaBox">		
				<pickerAddress @change="change">
					<view class="chooseBox">
						<!-- 前面的省市 -->
						<view>
							<text>{{txt1}}</text>
							<text>{{txt2}}</text>
							<text class="ri-arrow-down-s-line"></text>
						</view>
						<!-- 后面的区县 -->
						<view>
							<text>{{txt3}}</text>
							<text class="ri-arrow-down-s-line"></text>
						</view>
					</view>
				</pickerAddress>				
			</view>
			<!-- 下面根据上面的地区渲染的内容 -->
			<view class="areaConBox">
				<view class="aCon1" v-for="(item, index) in  listArr">
					<view class="imgBox1">
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<view class="txtCon1">
						<text>{{item.name}}</text>
						<text>{{item.detail}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
	export default {
		components:{
			pickerAddress
		},
		data() {
			return {
				txt1: '北京市',
				txt2: '',
				txt3: '朝阳区',
				title: 'Hello',
				listArr:[{
					imgUrl:'https://qincore.cn/xbk/index/18-12-06.png',
					name: '万科1',
					detail:'北京市朝阳区说到激动付款的女粉丝参见父皇为'
				},{
					imgUrl:'https://qincore.cn/xbk/index/18-12-06.png',
					name: '万科2',
					detail:'北京市朝阳区说到激动付款的女粉丝参见父皇为'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			change(data) {
				console.log(data);
				this.txt1 = data.data[0];
				this.txt2 = data.data[1];
				this.txt3 = data.data[2];
				// console.log(data.data.join(''))
			}
		}
	}
</script>

<style lang="less" scoped>
@import url('../../utils/remixicon.wxss');
.sideBox {
	.center {
		width: 690rpx;
		margin: 0 auto;
		.areaBox {
			width: 690rpx;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1px solid red;
			background-color: #f6f7f8;
			.chooseBox {
				width: 690rpx;
				height: 110rpx;
				font-size: 32rpx;
				font-weight: 600;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
			}
		}
		.areaConBox {
			.aCon1 {
				display: flex;
				box-sizing: border-box;
				width: 690rpx;
				height: 200rpx;
				margin-top: 40rpx;
				.imgBox1 {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					overflow: hidden;
					// border: 1px solid red;
					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
				.txtCon1 {
					width: 465rpx;
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// border: 1px solid red;
					padding-left: 25rpx;
					text:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
					}
					text:nth-child(2) {
						font-size: 25rpx;
						color: #999;
					}
				}
			}
		}
	}
	
}

</style>
